<!-- 七日充放电量 -->
<template>
	<Echart :options="option" class="right_top_inner" ref="echarts" />
</template>

<script>
import { getdailyDischarge, the7thData } from "@/api/modules/home.js";
import { graphic } from "echarts";
export default {
	props: {
		id: {
			type: String,
			required: true,
		},
		cname: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			option: {},
			pageflag: false,
			timer: null,
		};
	},
	computed: {
		isCollapse() {
			return this.$store.state.isCollapse;
		},
	},
	watch: {
		isCollapse(oldVal, newVal) {
			if (oldVal !== newVal) {
				this.$refs.echarts.resize();
			}
		},
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData() {
			//日充电量
			the7thData({ devId: this.id, sampleName: "day_charged_ana" }).then(
				(res) => {
					//日放电量
					the7thData({ devId: this.id, sampleName: "day_discharged_ana" }).then(
						(res1) => {
							if (res1.code == 200) {
								let dataVal = res.data;
								let dataVal1 = res1.data;

								let xData = [];
								let yData1 = [];
								let yData2 = [];
								for (let index = 0; index < dataVal.length; index++) {
									let element = dataVal[index];
									let element1 = dataVal1[index];

									xData.push(element.date);
									yData1.push(
										element.graphHisDTO ? element.graphHisDTO.value : ""
									);
									yData2.push(
										element1.graphHisDTO ? element1.graphHisDTO.value : ""
									);
								}
								this.$nextTick(() => {
									this.init(xData, yData1, yData2, this.cname);
								});
							} else {
								this.$Message({
									text: res.msg,
									type: "warning",
								});
							}
						}
					);
				}
			);
		},
		init(xData, yData, yData2, cname) {
			this.option = {
				legend: {
					x: "center", //可设定图例在左、右、居中
					y: "10px",
					data: ["充电量", "放电量"],
					textStyle: {
						fontSize: 12,
						color: "#F1F1F3",
					},
				},
				xAxis: {
					type: "category",
					data: xData,
					// boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						// show:false,
						lineStyle: {
							color: "#BAE7FF",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				yAxis: {
					name: "单位:MWh",
					type: "value",
					nameTextStyle: {
						color: "#fff",
						fontSize: 12,
					},

					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						lineStyle: {
							color: "#BAE7FF",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
					formatter: function (params) {
						var result = cname + "<br/>" + params[0].name + "<br/>";
						params.forEach(function (item) {
							result += item.seriesName + ": " + item.value + "/MWh<br/>";
						});
						return result;
					},
				},
				grid: {
					//布局
					show: true,
					left: "10px",
					right: "30px",
					bottom: "10px",
					top: "48px",
					containLabel: true,
					borderColor: "#1F63A3",
				},
				series: [
					{
						data: yData,
						type: "bar",
						symbol: "none", //去除点
						name: "充电量",
						barWidth: 15, //固定柱子宽度
						itemStyle: {
							//右，下，左，上
							borderRadius: [2, 2, 0, 0], //柱体圆角
							color: new graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "rgba(241,231,0,0.35)",
									},
									{
										offset: 1,
										color: "rgba(241,231,0,1)",
									},
								],
								false
							),
						},
						// markPoint: {
						//   data: [
						//     {
						//       name: "最大值",
						//       type: "max",
						//       valueDim: "y",
						//       symbol: "rect",
						//       symbolSize: [60, 26],
						//       symbolOffset: [0, -20],
						//       itemStyle: {
						//         color: "rgba(0,0,0,0)",
						//       },
						//       label: {
						//         color: "#FC9010",
						//         backgroundColor: "rgba(252,144,16,0.1)",
						//         borderRadius: 6,
						//         padding: [7, 14],
						//         borderWidth: 0.5,
						//         borderColor: "rgba(252,144,16,.5)",
						//         formatter: "充电量：{c} /MWh",
						//       },
						//     },
						//     {
						//       name: "最大值",
						//       type: "max",
						//       valueDim: "y",
						//       symbol: "circle",
						//                 //       itemStyle: {
						//         color: "#FC9010",
						//         shadowColor: "#FC9010",
						//         shadowBlur: 8,
						//       },
						//       label: {
						//         formatter: "",
						//       },
						//     },
						//   ],
						// },
					},
					{
						data: yData2,
						barWidth: 15, //固定柱子宽度
						type: "bar",
						symbol: "none", //去除点
						name: "放电量",
						itemStyle: {
							//右，下，左，上
							borderRadius: [2, 2, 0, 0], //柱体圆角
							color: new graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "rgba(24,210,181,.35)",
									},
									{
										offset: 1,
										color: "rgba(30,231,231,1)",
									},
								],
								false
							),
						},
						// markPoint: {
						//   data: [
						//     {
						//       name: "最大值",
						//       type: "max",
						//       valueDim: "y",
						//       symbol: "rect",
						//       symbolSize: [60, 26],
						//       symbolOffset: [0, -20],
						//       itemStyle: {
						//         color: "rgba(0,0,0,0)",
						//       },
						//       label: {
						//         color: "#09CAF3",
						//         backgroundColor: "rgba(9,202,243,0.1)",
						//         borderRadius: 6,
						//         borderColor: "rgba(9,202,243,.5)",
						//         padding: [7, 14],
						//         formatter: "放电量：{c} /MWh",
						//         borderWidth: 0.5,
						//       },
						//     },
						//     {
						//       name: "最大值",
						//       type: "max",
						//       valueDim: "y",
						//       symbol: "circle",
						//                 //       itemStyle: {
						//         color: "#09CAF3",
						//         shadowColor: "#09CAF3",
						//         shadowBlur: 8,
						//       },
						//       label: {
						//         formatter: "",
						//       },
						//     },
						//   ],
						// },
					},
				],
			};
		},
	},
};
</script>
<style lang="scss" scoped>
.right_top_inner {
	margin-top: -8px;
}
</style>
